import BannerAnim, { Element } from 'rc-banner-anim';
import React ,{Component} from 'react';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
const BgElement = Element.BgElement;
import './banner.css';
import '../../base.css';
import date from '../config.json';
import Request from '../../FetchRequest';
import {Link} from 'react-router-dom'; 





/**
 * 首页轮播
 */
class Banner extends Component{

    constructor(props) {
        super(props);
        this.state = { banner:[] }

        }

      

 
 /**
  * 在声明周期函数中初始数据
  */
  componentDidMount(){
    console.log(this.context.router);
    // let that = this;
    Request.fetchGET('official/getBanners', () => {
        console.log('加载数据！');
    }).then((resp) => {
        if (resp.ok) {
            resp.json().then((obj)=> {
                console.log(obj);
                this.setState({
                    banner:obj.data
                });
            });
        }else{
         
        }

    }).catch((error)=>{
      
    });
}
        render(){ 
            return (
                <div className="bannerWapper" >
                 
                <BannerAnim autoPlay>
                {
                        this.state.banner.map((item,index,arr)=>{
                        return(
                             <Element key={item.bannerId} prefixCls="banner-user-elem">
                                    <BgElement key="bg" className="bg" style={{ backgroundImage:'url('+item.backgroundImg+')'}}/>
                              </Element> );
                            })

                        }
             </BannerAnim>
             </div>
               );
        }
    }

    
    export default Banner;
    